<template>
  <div class="user_box">
    <input type="button" value="搜索" @click="searchs">
    <input type="text" v-model="search" placeholder="用户名 或 昵称">
    <br/>
    昵称: <input type="text" v-model="name" placeholder="昵称">
    用户名：<input type="text" v-model="user" placeholder="用户名">
    密码：<input type="text" v-model="pass" placeholder="密码">
    <input type="button" value="舔加用户" @click="addUser">
    <ul>
      <li v-for="items of users.result" :key="items.id">
        昵称：<input type="text" readonly="true" :value="items.nickname">
        账户：<input type="text" readonly="true" :value="items.username">
        密码：<input type="text" placeholder="自定义修改" v-model="password">
        <input type="button" value="确认修改" @click="sure" :id="items.id">
        <input type='button' value="删除用户" @click="dropUser" :id="items.id">
      </li>
    </ul>
    <user-page v-if="users.tatal"></user-page>
  </div>
</template>

<script>
import { allUser, changeUser, dropUser, addsUser } from 'com/shuju'
import UserPage from './components/userPage'
import { mapState } from 'vuex'
export default {
  name: 'AdminUsers',
  components: {
    UserPage
  },
  computed: {
    ...mapState({
      users: 'adminUser'
    })
  },
  data () {
    return {
      search: '',
      password: '',
      user: '',
      pass: '',
      name: ''
    }
  },
  methods: {
    addUser () {
      var tf = confirm('是否添加用户')
      if (tf) {
        var data = new FormData()
        data.set('username', this.user)
        data.set('password', this.pass)
        data.set('nickname', this.name)
        addsUser(data, this)
        this.user = ''
        this.pass = ''
        this.name = ''
      }
    },
    dropUser () {
      var tf = confirm('确认删除？')
      if (tf) {
        var id = event.target.getAttribute('id')
        dropUser(id, this)
      }
    },
    sure () {
      var tf = confirm('确认修改')
      if (tf) {
        var id = event.target.getAttribute('id')
        var data = new FormData()
        data.set('userId', id)
        data.set('password', this.password)
        changeUser(data, this)
      }
    },
    searchs () {
      if (this.search) {
        var data = new FormData()
        data.set('nickname', this.search)
        data.set('username', this.search)
        data.set('keywords', 'like')
        allUser(data, this)
      } else {
        alert('请输入')
      }
    }
  },
  mounted () {
    var data = new FormData()
    allUser(data, this)
  }
}
</script>

<style lang="stylus" scoped>
  .user_box{
    float: left
    margin-top: 50px
    background-color: red
    width: calc(100% - 254px)
    height: 700px
    ul{
      padding: 0
      margin: 0
      width: 100%
      height: 100%
      list-style: none
      li{
        width: 100%
        height: 50px
      }
    }
  }
</style>
